<template>
  <view>
    <view class="index_warp">
      <view class="detail_warp">
        <view class="header_warp flex">
          <view class="avatarUrl">
            <image v-if="user.token" :src="user.avatarUrl" />
            <image v-else src="@/static/images/nologin.png" />
          </view>
          <view class="nickName">
            {{ user.nickName }}
          </view>
        </view>
        <view class="gold_warp">
          <view class="detail_item_title">获得的代币</view>
          <view class="detail_item_num">
            {{ res.distributionCommission }}
            <text class="font-12">积分</text>
          </view>
          <!-- <view class="detail_item_btn" @click="clickWithdrawal">提现</view> -->
        </view>
      </view>
      <view class="integral_warp">
        <view class="integral_item">
          <view class="integral_title">已购买的代币</view>
          <view class="integral_num">{{ res.coin }} 积分</view>
        </view>
        <view class="integral_item">
          <view class="integral_title">邀请码:{{ res.inviteCode }}</view>
          <view
            class="integral_num theme_color"
            @click="h5Copy(res.inviteCode)"
            >复制</view
          >
        </view>
      </view>
      <view class="integral_warp flex_a">
        <view
          class="flex_y_c"
          v-for="item in navList"
          :key="item.id"
          @click="clickNavItem(item.path)"
        >
          <view :class="item.icon" :style="{ color: item.color }"></view>
          <view class="font-14">{{ item.name }}</view>
        </view>
      </view>
      <!-- <view class="my_share_warp">
        <view class="share_title">我的分享</view>
        <view class="share_content">
          <navigator url="/pages/my_share/index" class="share_item">
            <view class="left_image">
              <image src="@/static/images/Alipay.png" />
            </view>
            <view class="share_name">
              供应商选择与评估选择与评估选择 与评估（课程主题）
              供应商选择与评估选择与评估选择 与评估（课程主题）
              供应商选择与评估选择与评估选择 与评估（课程主题）
              供应商选择与评估选择与评估选择 与评估（课程主题）
            </view>
            <view class="iconfont icon-right" />
          </navigator>
        </view>
      </view> -->
    </view>
  </view>
</template>

<script>
import { distributionCoreIndex } from "@/api/common";
import { mapState } from "vuex";
import { h5Copy } from "@/utils/util";
import { my_distributionList } from "@/config/list";
export default {
  data() {
    return {
      navList: my_distributionList,
      res: {},
    };
  },
  computed: {
    ...mapState("user", ["user"]),
  },
  onLoad() {
    this.distributionCoreIndex();
  },
  methods: {
    distributionCoreIndex() {
      distributionCoreIndex().then((res) => {
        this.res = res;
      });
    },
    clickNavItem(url) {
      this.$u.route(url);
    },
    // 复制
    h5Copy(inviteCode) {
      uni.setClipboardData({
        data: inviteCode,
      });
    },
    clickWithdrawal() {
      console.log("提现");
      wx.navigateTo({
        url: "/pages/withdrawal/index",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.index_warp {
  .detail_warp {
    width: 750rpx;
    background: linear-gradient(121deg, #0058a3 0%, #46009d 100%);
    padding: 0 30rpx;
    .header_warp {
      height: 172rpx;
      border-bottom: 2px solid #fff;
      .avatarUrl {
        width: 120upx;
        height: 120upx;

        image {
          border-radius: 50%;
          overflow: hidden;
          background: #fff;
        }
      }
      .nickName {
        color: #fff;
        margin-left: 30upx;
        font-size: 32upx;
        font-weight: 600;
      }
    }

    .gold_warp {
      margin-top: 20upx;
      padding-bottom: 20upx;
      .detail_item_title {
        width: 160rpx;
        height: 44rpx;
        font-size: 32rpx;
        font-weight: 500;
        line-height: 44rpx;
        color: #ffffff;
      }

      .detail_item_num {
        height: 84rpx;
        font-size: 60rpx;
        font-weight: 800;
        color: #ffffff;
        .font-12 {
          margin-left: 10upx;
          color: #fff;
        }
      }
    }

    .detail_item_btn {
      width: 150rpx;
      height: 60rpx;
      background: #ffffff;
      border-radius: 34rpx;
      font-size: 28rpx;
      font-weight: 800;
      color: #0058a3;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }

  .integral_warp {
    margin-top: 30rpx;
    width: 750rpx;
    background: #ffffff;
    font-size: 32upx;
    font-weight: 600;
    .integral_item {
      width: 100%;
      height: 100rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 30rpx;

      &:nth-child(1) {
        border-bottom: 1rpx solid #eee;
      }

      .integral_title {
        font-size: 30rpx;
        font-weight: bold;
      }

      .integral_num {
        font-size: 28rpx;
        font-weight: bold;
      }
      .theme_color {
        color: #0058a3;
      }
    }
    .flex_y_c {
      margin: 20upx 0;
    }
    .iconfont {
      font-size: 80upx;
      margin-bottom: 20upx;
    }
  }

  .my_share_warp {
    margin-top: 30rpx;
    width: 100%;
    padding: 0 30rpx;
    background-color: #fff;

    .share_title {
      height: 102rpx;
      font-size: 30rpx;
      font-weight: bold;
      line-height: 100rpx;
      border-bottom: 2rpx solid #eee;
    }

    .share_content {
      margin-top: 26rpx;
      padding-bottom: 20rpx;

      .share_item {
        width: 100%;
        height: 120rpx;
        display: flex;
        align-items: center;
        margin-bottom: 30rpx;

        .left_image {
          width: 180rpx;
          height: 120rpx;
          background: rgba(0, 0, 0, 0);
          opacity: 1;
          border-radius: 10rpx;
          flex-shrink: 0;
        }

        .share_name {
          margin-left: 30rpx;
          width: 420rpx;
          height: 80rpx;
          font-size: 28rpx;
          font-weight: bold;
          line-height: 40rpx;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
        }

        .iconfont {
          margin-left: 50rpx;
          font-size: 20rpx;
        }
      }
    }
  }
}
</style>
